<!DOCTYPE html>
<html>

<head>
    <link href="./多列布局.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="masonry">
        <div class="item">
            <img src="../images/1.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/2.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/3.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/4.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/5.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/6.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/7.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/8.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/9.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/10.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/11.jpeg" alt="">
        </div>
        <div class="item">
            <img src="../images/12.jpeg" alt="">
        </div>
    </div>
</body>

</html>